import { createApp, defineComponent, h, reactive, ref } from "vue";
import HelloWorld from "./components/HelloWorld.vue";
const imgSrc = require("./assets/logo.png"); // eslint-disable-line

// 1. 使用 template 模板创建组件 如：Arr.vue
// import App from "./App.vue";

// 2. 使用h函数创建组件
// const App = h("div", { id: "container" }, [
//   h("img", {
//     alt: "Vue logo",
//     src: imgSrc,
//   }),
//   h(HelloWorld, {
//     msg: "Welcome to Your Vue.js + TypeScript App",
//     age: 18,
//   }),
// ]);

/*
// 3. 使用 defineComponent 结合setup来创建组件
const App = defineComponent({
  setup() {
    const state = reactive({
      name: "cuihua",
    });
    const numRef = ref(20);
    setInterval(() => {
      state.name += "1";
      numRef.value += 1;
    }, 1000);
    // setup中返回一个函数，这个函数会被当做组件的渲染函数（render），替换template部分
    return () => {
      const num = numRef.value;
      return h("div", { id: "container" }, [
        h("img", {
          alt: "Vue logo",
          src: imgSrc,
        }),
        h("h2", state.name + "_" + num),
      ]);
    };
  },
});
*/

// 4. 使用 jsx 语法创建组件（render函数不能直接使用jsx，需要安装babel插件才能支持）

import App from "./App";
createApp(App).mount("#app");
